<template>
  <div class="search">
    <Card>
      <Row class="operation padding-row" v-if="!selectedMember">
        <!-- <Button @click="addMember" type="primary">添加等级</Button> -->
      </Row>

      <Table :loading="loading" border :columns="columns" class="mt_10" :data="data" ref="table"></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator
          show-sizer></Page>
      </Row>
    </Card>
    <!-- 查看模态框 -->
    <Modal v-model="descFlag" :title="descTitle" width="1000" class="detmodel">
        <Table :loading="loading" border :columns="detlist" class="mt_10" :data="detdata" ref="table"></Table>
        <Row type="flex" justify="end" class="mt_10">
          <Page :current="detarr.pageNumber" :total="totaldet" :page-size="detarr.pageSize" @on-change="changePagedetarr"
            @on-page-size-change="changePageSizedetarr" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator
            show-sizer></Page>
        </Row>
      <div slot="footer">
        <Button type="primary" @click="suredet">确定</Button>
      </div>
    </Modal>
    <!-- 限额模态框 -->
    <Modal v-model="quotaFlag" :title="descTitle" width="500">
      <Form ref="quotaForm" :model="quotaForm" :rules="quotaRule" :label-width="100">
        <FormItem label="限额额度" prop="changeAmount" style="width: 90%">
          <Input-number :max="100000000" :min="1" v-model="quotaForm.changeAmount" style="width: 100%"></Input-number>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="quotaFlag = false">取消</Button>
        <Button type="primary" @click="handleSubmitModal">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import * as API_Member from "@/api/platformriskcontrol.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import * as RegExp from "@/libs/RegExp.js";

export default {
  name: "member",
  components: {
    region,
    ossManage,
  },
  data() {
    return {
      descTitle: "", // modal标题
      descFlag: false, //编辑查看框
      loading: true, // 表单加载状态
      addFlag: false, // modal显隐控制
      addMemberForm: {
        // 添加用户表单
        gradeExplain: '',
        grade: 1,
        gradeInterest: 1,
        money: '',
        integral: ''
      },
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        // username: "",
        // mobile: "",
        disabled: "OPEN",
      },
      // 修改对象
      form: {
        gradeExplain: '',
        grade: 1,
        gradeInterest: 1,
        money: '',
        integral: '',
        id: ''
      }, // 表单数据
      ruleValidate: {
        
      }, //查看验证
      columns: [
        {
          title: "商户名",
          key: "storeName",
          tooltip: true,
        },
        {
          title: "变动金额",
          key: "changeAmount",
          tooltip: true,
        },
        {
          title: "变动时间",
          key: "testingStartTime",
          tooltip: true,
        },
        {
          title: "结束时间",
          key: "testingEndTime",
          tooltip: true,
        },
        {
          title: "是否限额",
          key: "quota",
          tooltip: true,
          render: (h, params) => {
            if (params.row.quota == 0) {
              return h("Tag",{props: {color: "green",},}, "是");
            } else if (params.row.quota == 1) {
              return h("Tag",{props: {color: "geekblue",},}, "否");
            }
          },
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  justifyContent: "center",
                },
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      size: "small",
                      type: params.row.___selected ? "primary" : "default",
                    },
                    style: {
                      marginRight: "5px",
                      display: this.selectedMember ? "block" : "none",
                    },
                    on: {
                      click: () => {
                        this.callback(params.row, params.index);
                      },
                    },
                  },
                  params.row.___selected ? "已选择" : "选择"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      display: this.selectedMember ? "none" : "block",
                    },
                    on: {
                      click: () => {
                        this.detail(params.row);
                      },
                    },
                  },
                  "查看"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                      ghost: true,
                    },
                    style: {
                      marginRight: "5px",
                      display: params.row.quota == 0 ? "block" : "none",
                    },
                    on: {
                      click: () => {
                        this.setupbtn(params.row);
                      },
                    },
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      display: this.selectedMember ? "none" : "block",
                    },
                    on: {
                      click: () => {
                        this.quotabtn(params.row);
                      },
                    },
                  },
                  params.row.quota == 1?"限额":params.row.quota == 0?"取消限额":""
                ),
              ]
            );
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      selectMember: [], //保存选中的用户
      detlist: [
        {
          title: "订单编号",
          key: "sn",
          width: 250,
          tooltip: true,
        },
        {
          title: "商户名",
          key: "storeName",
          tooltip: true,
        },
        {
          title: "交易价格",
          key: "flowPrice",
          tooltip: true,
        },
        {
          title: "用户名",
          key: "memberName",
          tooltip: true,
        },
        {
          title: "商品数量",
          key: "goodsNum",
          tooltip: true,
        },
        {
          title: "创建时间",
          key: "createTime",
          tooltip: true,
        },
      ],
      detarr: {
        memberId: '',
        storeId: '',
        testingStartTime: '',
        testingEndTime: '',
        pageNumber: 1,
        pageSize: 10,
      },
      detdata: [], //详情明细
      totaldet: 0,
      quotaFlag: false,
      //限额额度
      quotaForm: {
        changeAmount: 1
      },
      //限额校验
      quotaRule: {
        changeAmount: [{ required: true, message: "请输入限额的额度" }],
      },
      quotasss: ''
    };
  },
  props: {
    // 是否为选中模式
    selectedMember: {
      type: Boolean,
      default: false,
    },
    // 已选择用户数据
    selectedList: {
      type: null,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    selectedList: {
      handler(val) {
        this.$set(this, "selectMember", JSON.parse(JSON.stringify(val)));
        this.init(this.data);
        // 将父级数据与当前组件数据进行匹配
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //查询会员等级列表
    getData() {
      API_Member.getList(this.searchForm).then((res) => {
        if (res.result.records) {
          this.loading = false;
          this.init(res.result.records);
          this.total = res.result.total;
        }
      });
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    //查看详情
    detail(val) {
      this.descTitle = `查看 ${val.storeName}`;
      this.descFlag = true;
      this.detarr.memberId = val.memberId
      this.detarr.storeId = val.storeId
      this.detarr.testingStartTime = val.testingStartTime
      this.detarr.testingEndTime = val.testingEndTime
      // memberId 小程序用户id
      // storeId 店铺id
      // testingStartTime 开始时间
      // testingEndTime 结束时间
      this.getMemberInfo();
    },
    // 查询查看详情
    getMemberInfo() {
      API_Member.getdetList(this.detarr).then((res) => {
        if (res.result.records) {
          this.detdata = res.result.records
          this.totaldet = res.result.total;
        }
      });
    },
    // 分页 改变页码 查看弹框
    changePagedetarr(v) {
      this.detarr.pageNumber = v;
      this.getMemberInfo();
    },
    // 分页 改变页数 查看弹框
    changePageSizedetarr(v) {
      this.detarr.pageSize = v;
      this.detarr.pageNumber = 1;
      this.getMemberInfo();
    },
    // 查看确定按钮
    suredet(){
      this.descFlag = false
      this.detarr.pageSize = 10;
      this.detarr.pageNumber = 1;
    },
    // 回调给父级
    callback(val, index) {
      this.$set(val, "___selected", !val.___selected);
      console.log(val.___selected);
      console.log(this.selectMember);
      let findUser = this.selectMember.find((item) => {
        return item.id == val.id;
      });
      // 如果没有则添加
      if (!findUser) {
        this.selectMember.push(val);
      } else {
        // 有重复数据就删除
        this.selectMember.map((item, index) => {
          if (item.id == findUser.id) {
            this.selectMember.splice(index, 1);
          }
        });
      }
      this.$emit("callback", val);
    },
    // 初始化信息
    init(data) {
      data.forEach((item) => {
        if (this.selectMember.length != 0) {
          this.selectMember.forEach((member) => {
            if (member.id == item.id) {
              this.$set(item, "___selected", true);
            }
          });
        } else {
          this.$set(item, "___selected", false);
        }
      });
      this.data = data;
    },
    //限额
    quotabtn(v) {
      this.quotaForm.quotaId = v.id
      this.quotasss = v.quota
      if(this.quotasss == '1'){
        this.descTitle = `限额 ${v.storeName}`;
        this.quotaFlag = true;
        this.$refs.quotaForm.resetFields();
      } else {
        let paramsno = {
          id: this.quotaForm.quotaId,
          quota: '1',
        }
        this.$Modal.confirm({
          title: "提示",
          content: "<p>确认取消限额此商户？</p>",
          onOk: () => {
            API_Member.getquoList(paramsno).then((res) => {
              if (res.success) {
                this.$Message.success("取消限额成功！");
                this.getData();
              } else {
                // this.$Message.error(res.message);
              }
            });
          },
        })
      }
    },
    // 限额确定
    handleSubmitModal() {
      this.$refs.quotaForm.validate((valid) => {
        if (valid) {
          let params = {
            id: this.quotaForm.quotaId,
            quota: '0',
            changeAmount: this.quotaForm.changeAmount
          }
          API_Member.getquoList(params).then((res) => {
            if (res.code == 200) {
              this.quotaFlag = false;
              this.$Message.success("限额成功！");
              this.getData();
            }
          });
        } else {
          this.$Message.error('必填项不能为空!');
          return false
        }
      });
    },
    //编辑
    setupbtn(v){
      this.quotaForm.quotaId = v.id
      this.descTitle = `限额修改 ${v.storeName}`;
      this.quotaFlag = true;
      this.quotaForm.changeAmount = Number(v.changeAmount)
      // this.$refs.quotaForm.resetFields();
    }
  },
  mounted() {
    this.getData();
  },
};
</script>
<style>
.detmodel .ivu-icon-ios-close {
  display: none;
}
</style>
<style lang="scss" scoped>
/deep/ .ivu-table-wrapper {
  width: 100%;
}
/deep/ .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>
